<template>
  <div id="import">
    <el-row>
      <el-col :style="mystyle">
    <el-form>
    <h1>批量导入</h1>
      <el-upload class="upload-demo" :before-upload="beforeAvatarUpload" :on-success="getImportList"
          :action="this.$http.defaults.baseURL + 'person/uploadfile'" with-credentials accept="application/x-zip-compressed">
        <el-button type="primary" icon="el-icon-document">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传zip文件，且不超过5mb</div>
      </el-upload>
    </el-form>
    <h1>上传结果说明</h1>
    <el-table :data="importPersonslist" highlight-current-row v-loading="importlistLoading" >
      <el-table-column type="index" label="序号" width="70">
      </el-table-column>
      <el-table-column prop="Filename" label="文件名" width="120">
      </el-table-column>
      <el-table-column prop="Issuccess" label="是否成功" width="120" :formatter = "stateFormat">
      </el-table-column>
      <el-table-column prop="Msg" label="说明">
      </el-table-column>
    </el-table>
      <div class="block">
        <el-pagination layout="prev, pager, next" :total="totalnum" :page-size="pagenum" @current-change="handleCurrentChange"></el-pagination>
      </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      importlistLoading: false,
      fileList: [],
      importPersonslist: [],
      total: 0,
      page: 1,
      pagenum: 10,
      listLoading: false,
      totalnum: 0,
      filters: {
        Name: ''
      },
      mystyle: 'background:#fff;border-radius:5px;margin:20px; padding:0 20px;width: calc(100% - 20px);height:' + 500 + 'px'
    }
  },
  methods: {
    stateFormat (row, column) {
      console.log('翻译字段')
      console.log(row.Issuccess)
      if (row.Issuccess === true) {
        return '成功'
      } else if (row.Issuccess === false) {
        return '失败'
      }
    },
    beforeAvatarUpload (file) {
      console.log('文件类型')
      console.log(file.name)
      const isZIP = file.name.indexOf('.zip') > 0
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isZIP) {
        this.$message.error('上传文件只能是 ZIP 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!')
      }
      return isZIP && isLt5M
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，如有多个文件请压缩为zip文件打包上传。`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleCurrentChange (val) {
      this.page = val
      this.getImportList()
    },
    importPersons () {
      this.getImportList()
    },
    // 获取用户列表
    getImportList (res) {
      if (res.IsSuccess === true) {
        this.$message({
          message: '导入成功！',
          type: 'success'
        })
        this.importPersonslist = res.Result
        console.log(this.importPersonslist[0].Issuccess)
      } else {
        console.log(res.Msg)
        this.$message({
          message: '导入失败:' + res.Msg,
          type: 'error'
        })
      }
    },
    mainheight (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.mystyle = 'background:#fff;border-radius:5px;margin:20px; padding:0 20px;width: calc(100% - 20px);height:' + (clientHeight - 150) + 'px'
    }
  },
  mounted () {
    this.mainheight(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.mainheight(_this)
    }
  }
}
</script>
<style scope>
#import .el-upload-list__item{
  width: 250px;
}
#import a{
  width: 200px;
}
</style>
